<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>打工详情</title>
    <style>
        /* 样式 */
        body {
            font-family: sans-serif;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
        }

        .header {
            font-size: 24px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: bold;
        }

        .work-item {
            background-color: white;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: space-between;
        }

        .name {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .work {
            color: #555;
        }

        .income {
            color: #43a047;
            font-weight: bold;
        }

        .summary {
            font-weight: bold;
            margin-top: 20px;
            color: #333;
            background-color: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .summary-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .total {
            font-size: 20px;
            font-weight: bold;
            margin-top: 15px;
            text-align: right;
        }

        .highlight {
            color: #e74c3c;
            font-weight: bold;
        }

        .expense {
            background-color: #fee8dc;
            padding: 10px;
            margin-top: 10px;
            border-radius: 5px;
            color: #e74c3c;
        }

        h1 {
            color: #333;
            text-align: center;
        }

        .work-report {
            background-color: #f0f0f0;
            border-left: 4px solid #4CAF50;
            margin-bottom: 15px;
            padding: 10px;
        }

        .username {
            color: #1e88e5;
            font-weight: bold;
        }

        .total-income {
            color: #e53935;
        }

        .current-balance {
            color: #ffa000;
        }
    </style>
</head>

<body>
    <div class="header">{{workTitle}}</div>

    {{each workData item}}
    <div class="work-item">
        <div>
            <div class="name">{{item.name}}</div>
            <div class="work">{{item.work}}</div>
        </div>
        <div class="income">{{item.income}}</div>
    </div>
    {{/each}}

    <div class="summary">
        <div class="summary-item">
            <div>总收入：</div>
            <div>{{originalIncome}}金币</div>
        </div>

        {{if hasMaster}}
        <div class="summary-item">
            <div>上缴主人({{masterName}})50%：</div>
            <div>-{{masterCut}}金币</div>
        </div>
        <div class="summary-item">
            <div>实际获得：</div>
            <div class="highlight">{{finalIncome}}金币</div>
        </div>
        {{/if}}

        {{if hasExpense}}
        <div class="expense">
            <div>意外支出：{{expenseText}}</div>
            <div>-{{expenseAmount}}金币</div>
        </div>
        {{/if}}

        <div class="total">当前余额：{{currentBalance}}金币</div>
    </div>
</body>

</html>